<template>
  <div class="ico">
    <!-- {{lcodata}} -->
    <h4 style="padding-left: 10px">推荐歌曲 ></h4>

    <div class="d-flex flex-wrap _card">
      <div
        class="card _card_kp"
        style="width: 15rem"
        v-for="item in lcodata"
        :key="item.id"
      >
        <router-link :to="{ name: 'musicpage', query: { id: item.id } }">
          <img :src="item.picUrl" class="card-img-top" />
          <div class="card-body">
            <p class="card-text">{{ item.name }}</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Api from '../lib/api'
import { mapMutations, mapState } from "vuex";
export default {
  name: "ico",
  data() {
    return {
      hot: "",
    };
  },
  created() {
    let _this=this
    //调用获取未登入状态歌单
    Api.lcolist(_this)
      //登入  
    // this.$axios.get("recommend/resource",{
    //   params:{
    //     limit:10
    //   },
    // }).then(res=>{
    //   // console.log(res.data);
    //    this.$store.commit("uplcodata", res.data.recommend.slice(0, 10));
    // })

  },
  computed: {
    ...mapState(["lcodata"]),
  },
  methods: {
    ...mapMutations(["uplcodata"]),
  },
};
</script>

<style lang="scss">
.ico {
  ._card {
    cursor: pointer;
    ._card_kp {
      margin: 10px 15px;
    }
  }
}
</style>
